<template>
    <div>
        <Row>
            <Col span="18"><Alert type="success">{{infoAlert}}</Alert></Col>
            <Col span="6"><Button @click="handleAdd()" :disabled="typeof(data)=='undefined'||!data.children" long type="success" v-if="checkPermission('111911')" >添加条目</Button></Col>
            <Modal id="editModal" ref="modal" @on-ok="ok" @on-cancel="cancel">
                <p slot="header" style="color:#f60;text-align:center">
                    <Icon type="information-circled"></Icon>
                    <span>{{handleType}}</span>
                </p>
                <div style="text-align:center;font-size:14px">
                    <Form ref="formValidate" :model="FormDataDictionary" :rules="ruleValidate" :label-width="80">
                        <FormItem label="条目名称" prop="name">
                            <Input v-model="FormDataDictionary.name" placeholder="请输入条目名称"></Input>
                        </FormItem>
                        <FormItem v-if="options.show_url" label="链接地址" prop="url">
                            <Alert type="error" v-if="linkDiscription!=''">{{ linkDiscription }}</Alert>
                            <Input v-model="FormDataDictionary.url" placeholder="请输入链接地址"></Input>
                        </FormItem>
                        <FormItem v-if="options.show_logo" label="图片" prop="logo">
                            <UploadSingleFile v-model="FormDataDictionary.logo" :format="['jpg','png']"></UploadSingleFile>
                        </FormItem>
                        <FormItem v-if="options.show_remark" label="备注" prop="remark">
                            <Input v-model="FormDataDictionary.remark"></Input>
                        </FormItem>
                    </Form> 
                </div>
            </Modal>
        </Row>
        <Table highlight-row :columns="columns" :data="list" @on-row-click="handleClick" height="500"></Table>
    </div>
</template>
<script>
import DataDictionary from "@/common/model/DataDictionary"
import UploadSingleFile from "@/common/components/UploadSingleFile";
import parent from "../Parent"
export default {
    extends:parent,
    name: 'DictionaryList',
    props:{
        data:{
            type: Object
        },
        title: {
            type: String,
            default: ""
        },
        infoAlert:{
            type:String,
            default:""
        },
        options: {
            type: Object,
            default: function() {
                return {
                    show_url: false,
                    show_remark: false,
                    show_logo: false,
                    logo_type: "url" // url地址，data数据，style样式
                };
            }
        },
        itemCount:{
            type:Number,
            default:10000
        },
        linkDiscription:{
            type:String,
            default:""
        }
    },
    data() {
        return {
            current_name: "",
            FormDataDictionary: new DataDictionary(),
            handleType: "添加新条目",
            columns:[
                {
                    title: this.title, key: "name", className: 'demo-table-info-column',render: (h, params) => {
                    return h('div', [
                        h('span', params.row.name),
                        h("Button", {
                            props: { type: "error", size: "small" },
                            style: { marginRight: "5px", float: "right",display:this.showButton("111912") },
                            on: {
                                click: () => {this.handleRemove(params.index);}
                            }
                        },  "删除"),
                        h("Button", {
                            props: { type: "info", size: "small" },
                            style: { marginRight: "5px", float: "right",display:this.showButton("111914") },
                            on: {
                                click: () => {this.handleEdit(params.index);}
                            }
                        },  "详情/编辑"),
                    ]);
                }
                }
            ]
        }
    },
    computed: {
        list(){
            return this.data ? this.data.children : [];
        },
        ruleValidate() {
            const validateName = (rule, value, callback) => {
                for(var i = 0; i < this.data.children.length; i++) {
                    if(value != this.current_name && value == this.data.children[i].name) callback(new Error("名称已存在"));
                }
                callback();
            }
            
            var temp = {
                name:[
                    {required:true,message:'条目标题不能为空',trigger:'blur'},
                    {validator: validateName, trigger:'blur'}
                ]
            }
            if(this.options.show_url) {
                Object.assign(temp, { 
                    url: [
                        {required:true,message:'地址不能为空',trigger:'blur'}
                    ]
                });
            }
            if(this.options.show_remark) {
                Object.assign(temp, { 
                    remark: [  
                        {required:true,message:'不能为空',trigger:'blur'}
                    ]
                });
            }
            return temp;
        }
    },
    methods: {
        handleClick(current, index){
            this.$emit("on-current-change", this.data.children[index]);
        },
        handleAdd() {
            const check = this.list.length < this.itemCount;
            if(!check){
                this.$Notice.warning({
                    title: "提醒",
                    desc: "最多只能录入"+this.itemCount+"个条目,请删除后添加!"
                });
                return false;
            }else{
                this.FormDataDictionary = new DataDictionary();
                this.show();
            }
        },
        handleRemove(index){
            if(confirm("确定要删除该项信息吗（不可恢复）？")) {
                this.api.post("datadictionary/dictionary_remove", { id: this.list[index].id}, res => {
                this.list[index].children = [];
                this.list.splice(index, 1);
                this.$emit("on-current-change", {});
                });
            }
        },
        handleEdit(index){
            this.handleType = "详情/编辑条目";
            this.FormDataDictionary = DataDictionary.copy(this.list[index]);
            this.FormDataDictionary.index = index;
            this.show();
        },
        ok(index){
            this.$refs["formValidate"].validate( valid => {
                if(valid) {
                    if (!this.FormDataDictionary.id) {
                        this.FormDataDictionary.parent_id = this.data.id;
                        this.FormDataDictionary.dictype = this.data.dictype;
                        this.api.post("datadictionary/dictionary_add", this.FormDataDictionary.serialize(), res => {
                            this.FormDataDictionary.id = res.id;
                            this.list.push(this.FormDataDictionary);
                        });
                    }else{
                        this.api.post("datadictionary/dictionary_update", this.FormDataDictionary.serialize(), res=> {
                            this.list[this.FormDataDictionary.index].copy(this.FormDataDictionary);
                        });
                    }
                }else {
                    this.show();
                }
            })
        },
        cancel(){
            this.$refs["modal"].visible = false;
        },
        show(){
            this.current_name = this.FormDataDictionary.name;
            this.$refs["modal"].visible = true;
        }
    },
    components:{
        UploadSingleFile
    }
};
</script>
<style>
    #editModal{
        position: absolute;
        z-index: 1;
    }
</style>
